// 默认激活当前标签样式
a[3].classList.add("active")
// 回到顶部
let top1 = document.querySelector(".top")
let backBtn = document.querySelector(".back-btn")
let backs = document.querySelector(".back")
// 获取页面对应的标签 进行关联
let backSpans = document.querySelectorAll(".back>span")
let h5s = document.querySelectorAll(".Financial h5")
// 当滑轮>300时才出现回到顶部
// 获取HTML标签
// console.log(document.documentElement)

/* //重新加载页面 回到顶部 预处理
window.onbeforeunload = () => {
    document.documentElement.scrollTop = 0
} */
window.onscroll = () => {
    if (document.documentElement.scrollTop>300) {
        top1.style.display = "block"
        
    } else {
        top1.style.display = "none"
    }
    
}
// 定义清除定时器
let timer = null
// 给backSpans下每一个span绑定事件
backSpans.forEach((item,i) => {
    item.addEventListener("click",() => {
        clearInterval(timer)
        // 设置一个目标变量
        let target = h5s[i].offsetTop
        // 滚动变量 监听距离
        let current = document.documentElement.scrollTop
        // 排它
        backSpans.forEach((j) => {
            j.classList.remove("show")
        })
        item.classList.add("show")
        // 开启定时器 监听滚动距离
        timer =  setInterval(() => {
            if (target>current) {
                // 往下滚
                current +=50
                // 重新赋值
                document.documentElement.scrollTop = current
            } else {
                // 往上滚
                current -=50
                // 重新赋值
                document.documentElement.scrollTop = current
            }
            if(Math.abs(target-current)<=50){
                clearInterval(timer)
                timer = null//清除定时器所占内存
                document.documentElement.scrollTop = target
            }
        },20)//每50毫秒执行一次判断
        
    })
})

// 给按钮绑定事件
// 定义一个判断点
let bool = true
backBtn.addEventListener("click",() => {
    if (bool==true) {
        backs.style.opacity="1"
        backBtn.innerHTML = "<"
        bool = false
    } else {
        backs.style.opacity="0"
        backBtn.innerHTML = ">"
        bool = true
    }
})